<template>
  <li @click.stop="componentCheckInfo(listItemData)">
    <div class="desc_box">
      <div class="item_title">
        <span class="title-label">
          <template v-if="!listItemData.deviceId">
            部门
          </template>
          <template v-if="listItemData.deviceId">
            设备
          </template>
        </span>
        <span class="title-text">
          <template v-if="!listItemData.deviceId">
            {{ listItemData.departmentName }}
          </template>
          <template v-if="listItemData.deviceId">
            {{ listItemData.deviceName }}
          </template>
        </span>
        <template>
          <span class="title-tip" style="text-align: right;">
            部件数量：{{ listItemData.countNum }}
          </span>
        </template>
      </div>
      <div class="item-body">
        <span v-if="listItemData.deviceId">
          设备编号：{{ listItemData.deviceCode }}
        </span>
        <span v-else></span>
        <span
          class="item-show"
          @click.stop="eventpartListShow(listItemData, listItemIndex)"
        >
          <template v-if="showMore && show && showOverdue">
            <span>收起</span>
          </template>
          <template v-else>
            <span>展开</span>
          </template>
        </span>
      </div>
      <template v-if="showMore && show && showOverdue">
        <div
          class="item-chlid"
          v-for="(item, index) in listItemData.partList"
          :key="item.id + index"
          @click.stop="eventChlid(item)"
        >
          <div class="child-title">
            <span class="child-label">
              部件
            </span>
            <span>{{ item.sparePartName }}</span>
          </div>
          <div class="child-body">部件规格：{{ item.sparePartModel }}</div>
          <div class="child-body">
            更换周期：{{ item.outRepertoryCount }} 件
          </div>
          <div class="child-body">
            上次更换：
            {{ item.outRepertoryTime | formatDate("YYYY-MM-DD HH:mm") }}
          </div>
          <div class="child-body handle">
            更换状态：{{ item.receiveOperatorName }}
            <div class="handle-btn">
              <span class="btn" @click.stop="eventDetail(item)">
                执行
              </span>
            </div>
          </div>
        </div>
      </template>
      <div
        class="newpage_work_more"
        v-if="showMore && show && showIndex === listItemIndex"
        @click.stop="getMore(listItemData)"
      >
        查看更多
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    listItemData: {
      type: Object,
      default: () => {}
    },
    firstIndex: Number,
    secondIndex: Number,
    showOverdue: Boolean,
    isLastLevel: Boolean,
    showMore: Boolean,
    viewType: Number,
    departmentName: String
  },
  data() {
    return {
      show: false
      // undoList:[],
    };
  },
  computed: {
    undoList() {
      if (this.listItemData.undoList && this.listItemData.undoList.length) {
        return this.listItemData.undoList;
      } else {
        return [];
      }
    }
  },
  methods: {
    // 设备下所有部件点巡检记录
    componentCheckInfo: function(config) {
      if (this.firstIndex) {
        if (!this.secondIndex) {
          this.getDeviceReplaceDetail(config);
        } else {
          this.getHistoryReplaceDetail(config);
        }
        return;
      } else {
        if (this.isLastLevel) {
          this.eventChlid(config);
        } else {
          this.$emit("eventOpenNext");
        }
        return;
      }
    },
    eventUndoListShow() {
      if (!this.showOverdue || !this.show) {
        this.show = true;
      } else {
        this.show = false;
      }
      this.$emit("eventChangeOverdueIndex");
    },
    getMore() {
      this.$emit("eventPageNext");
    },
    eventChlid(item) {
      if (this.viewType != 3) {
        this.$emit("eventChlid");
        this.$router.push({
          name: `deviceCheckOverViewPage`,
          query: {
            deviceId: item.deviceId,
            deviceName: item.deviceName,
            deviceTypeName: item.deviceTypeName,
            viewType: this.viewType,
            departmentId: item.departmentId,
            departmentName:
              this.listItemData.departmentName || this.departmentName,
            type: "设备"
          }
        });
      }
    },
    eventOverdueHandle(arr, tag) {
      this.$emit("eventOverdueHandle", arr, tag);
    },
    // 点击进入部件更换
    getDeviceReplaceDetail(device) {
      setTimeout(() => {
        this.$router.push({
          name: "componentReplace",
          query: {
            deviceId: device.deviceId
          }
        });
      }, 200);
    },
    // 点击进入更换历史详情
    getHistoryReplaceDetail(device) {
      setTimeout(() => {
        this.$router.push({
          path: "/manage/deviceDetailManage/deviceInfos",
          query: {
            deviceId: device.deviceId
          }
        });
      }, 200);
    }
  }
};
</script>

<style lang="less" scoped>
li {
  &:not(:first-child) {
    margin-top: 12px;
  }

  background: rgba(41, 42, 77, 1);
  border-radius: 4px;

  &.active {
    background: rgba(56, 58, 105, 1);
  }

  .desc_box {
    padding: 8px;
    height: auto;
    min-height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    .ellipsis {
      display: inherit !important;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item_title {
      font-size: 17px;
      color: #fff;
      // overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.overdue {
        justify-content: flex-start;
      }
      .tag {
        color: #4266d6;
        float: right;
        font-size: 15px;

        &.yollow {
          color: #dd9710;
        }
        &.redy {
          color: #f56c6c;
        }
        &.green {
          color: #67c23a;
        }
      }
      .title-label {
        margin-left: -8px;
        border-radius: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        font-size: 14px;
        padding: 0 12px 1px 8px;
        background-color: #456de6;
        margin-right: 8px;
      }
      .title-text {
        margin-right: 8px;
      }
      .title-tip {
        width: 100%;
        margin-right: 8px;
        font-size: 14px;
        // color: #dd9710;
        &.status {
          color: #456de6;
        }
        &.status1,
        &.status4 {
          color: #4fa8e7;
        }
        &.status3 {
          color: #456de6;
        }
        &.status5 {
          color: #dd9710;
        }
        &.status9,
        &.status7 {
          color: #dd9710;
        }
        // &.green {
        //   color: #67c23a;
        // }
        // &.gray {
        //   color: #999;
        // }
      }
    }
    .item-body {
      color: #456de6;
      font-size: 16px;
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      > span {
        flex: 1;
      }
      .item-show {
        color: #fff;
        font-size: 14px;
        width: 52px;
        padding: 1px 0;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 80px;
        border: 1px solid #456de6;
      }
    }
    .item-body-other {
      color: rgba(255, 255, 255, 0.6);
    }
    .item-bottom {
      padding-top: 6px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .child-body-state {
        margin-left: 8px;
        padding: 0 2px 1px;
        color: #456de6;
        border: 1px solid #456de6;
        border-radius: 2px;
      }
      .handle-btn {
        margin-left: 8px;
        flex: none;
      }
      .btn {
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 11px 3px;
        border-radius: 12px;
      }
    }
    .item-chlid {
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      padding-top: 15px;
      padding-bottom: 6px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      .child-title {
        color: #fff;
        // overflow: hidden;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
        display: flex;
        align-items: center;
        // justify-content: space-between;

        .child-label {
          font-size: 14px;
          margin-right: 8px;
          padding: 0 6px 1px;
          color: #fff;
          border: 1px solid #456de6;
          border-radius: 2px;
        }
        .child-tip {
          width: 100%;
          margin-right: 8px;
          font-size: 14px;
          &.status {
            color: #dd9710;
          }
          &.status {
            color: #456de6;
          }
          &.status1,
          &.status4 {
            color: #4fa8e7;
          }
          &.status3 {
            color: #456de6;
          }
          &.status5 {
            color: #dd9710;
          }
          &.status9,
          &.status7 {
            color: #dd9710;
          }
        }
      }

      .child-body {
        font-size: 14px;
        margin: 8px 0;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        .child-body-state {
          margin-left: 8px;
          padding: 0 2px 1px;
          color: #456de6;
          border: 1px solid #456de6;
          border-radius: 2px;
        }
        &.handle {
          justify-content: space-between;
          color: #fff;
        }
      }
      .handle-btn {
        margin-left: 8px;
        flex: none;
      }
      .btn {
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 11px 3px;
        border-radius: 12px;
      }
    }
    .their {
      font-size: 14px;
      color: #fff;
    }
    .more  {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .time {
      font-size: 14px;
      color: rgba(69, 109, 230, 1);
    }
    .newpage_work_more {
      height: 40px;
      font-size: 12px;
      line-height: 40px;
      text-align: center;
      color: #456de6;
    }
  }
}
</style>
